<template>
  <div id="detail">
    <header>
      <i class="iconfont icon-fanhui" @click="returenTo"></i>
      <span>商品详情</span>
    </header>
    <div class="detail-imgs">
      <SamSwiper :imgList="imgList"></SamSwiper>
    </div>
    <div class="detail-desc">
      <div class="detail-desc-title">
        {{ currentGoods.name + " " + currentGoods.title }}
      </div>
      <div class="detail-desc-more">
        {{ currentGoods.detailDesc }}
      </div>
      <div class="detail-desc-price">
        <i class="iconfont icon-qianqian-"></i>
        <span>{{ currentGoods.price}}</span>
        <i class="iconfont icon-fenxiang"></i>
      </div>
    </div>
    <div class="detail-chose">
      <span>已选</span>
      <span>1件</span>
      <i class="iconfont icon-arrow-right-bold"></i>
    </div>
    <div class="detail-distri">
      <span>配送</span>
      <span>不支持七天无理由退换</span>
    </div>

    <div class="detail-picstext">
      <ul>
        <li v-for="v,i in imgList" :key="i">
          <img :src="v" alt="">
        </li>
      </ul>
    </div>
    <footer class="detail-footer">
      <div @click="toCart">
        <i class="iconfont icon-cart"></i>
        <span>购物车</span>
      </div>
      <div @click="addToCart">加入购物车</div>
    </footer>

    <div style="height: 5rem;">

    </div>

  </div>
</template>
<script>
import SamSwiper from '@/components/Swiper/SamSwiper.vue';
export default {
  name: 'GoodsDetail',
  components: {
    SamSwiper
  },
  data() {
    return {
      currentGoods:{}
    }
  },
  mounted(){
    this.initData()
  },
  computed:{
    imgList(){
      return this.currentGoods.imgList
    }
  },
  methods: {
    returenTo() {
      this.$router.back()
    },
    // 跳转到购物车的页面
    toCart(){
      const currentId = this.currentGoods.id
      this.$router.push({name:'cart',params:{currentId}})
    },
    // 初始化数据
    initData(){
      const goodsId = this.$route.params.id
      const goodsList = this.$store.state.home.goodsList
      const currentGoods = goodsList.filter(item => item.id === goodsId)
      this.currentGoods = currentGoods[0]
    },
    // 添加商品到购物车
    addToCart(){
      // 整理好商品数据
      const data = {
        // 当前登录的账户
        id:this.currentGoods.id,
        title:this.currentGoods.title,
        price:this.currentGoods.price,
        goodsNum:1,
        image:this.currentGoods.image
      }
      // 添加成功的提示
      this.$notify({type:'success',text:'√ 添加成功'})
      // 将数据存储到vuex
      this.$store.commit('cart/ADDGOODS',data) 
    }
  }
};
</script>
<style lang='less' scoped>
#detail {
  background-color: rgb(237, 235, 235);

  header {
    width: 37.5rem;
    font-size: 1.8rem;
    color: black;
    line-height: 4rem;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 999;
    .iconfont {
      font-size: 1.8rem;
      margin-left: 1rem;
    }

    span {
      margin-left: 1rem;
    }
  }

  .detail-imgs {
    width: 37.5rem;
    height: 30rem;
    margin-top: 4rem;
    // background-color: aquamarine;
  }

  .detail-desc {
    width: 34.5rem;
    height: 10rem;
    background-color: white;
    margin-top: 0.5rem;
    padding: 1.5rem;

    .detail-desc-title {
      font-size: 1.8rem;
      font-weight: 500;
    }

    .detail-desc-more {
      font-size: 1rem;
      color: gray;
      margin-top: 1rem;
    }

    .detail-desc-price {
      color: orangered;
      font-weight: bold;

      .icon-qianqian- {
        font-size: 1rem;
        margin-right: 1rem;
      }

      .icon-fenxiang {
        font-weight: normal;
        color: rgb(105, 102, 102);
        font-size: 2.5rem;
        margin-left: 25rem;
      }
    }
  }

  .detail-chose {
    line-height: 5rem;
    margin-top: 1rem;
    background-color: white;
    font-size: 1.5rem;
    padding-left: 1.5rem;

    span {
      &:last-of-type {
        margin-left: 2rem;
        font-size: 1.4rem;
      }
    }

    i {
      margin-left: 26rem;
    }
  }

  .detail-distri {
    background-color: white;
    line-height: 5rem;
    margin-top: 1rem;

    span {
      &:first-child {
        font-size: 1.5rem;
        margin-left: 1.5rem;
      }

      &:last-child {
        font-size: 1.4rem;
        margin-left: 2rem;
      }
    }
  }
  .detail-footer{
    width: 37.5rem;
    line-height: 5rem;
    background-color: white;
    position: fixed;
    bottom: 0;
    display: flex;
    div{
      &:first-child{
        text-align: center;
        width: 10rem;
        background-color: white;
        display: flex;
        flex-direction: column;
        .iconfont{
          font-size: 2rem;
          height: 1.5rem;
        }
        span{
          font-size: 1rem;
          height: 4rem;
        }
      }
      &:last-child{
        color: white;
        text-align: center;
        width: 27.5rem;
        background-color: rgb(6, 161, 222);
      }
    }
  }
  .detail-picstext{
    img{
      width: 37.5rem;
    }
  }
}</style>